<template>
	<view class="page-main box box-tb box-align-center box-pack-center">
		<u-image :src="user.icon" width="168rpx" height="171rpx" shape="circle">
		</u-image>
		<view class="password box box-tb mt20">
			<u-form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="200">
				<u-form-item class="list" label="新密码" prop="newPassword">
					<u-input placeholder="请输入新密码" border="surround" v-model="form.newPassword" type="password"
						:password-icon="true" :border="none"></u-input>
				</u-form-item>
				<u-form-item class="list" label="确认新密码" prop="requirePassword">
					<u-input placeholder="再次输入新密码" border="surround" v-model="form.requirePassword" type="password"
						:password-icon="true" :border="none">
					</u-input>
				</u-form-item>
			</u-form>
			<!-- <view class="list box box-pack-between box-align-center">
				<view>
					新密码
				</view>
				<u-input placeholder="请输入新密码" border="surround" v-model="newPassword" :border="none"></u-input>
			</view>
			<view class="list box box-pack-between box-align-center mt10">
				<view>
					确认新密码
				</view>
				<u-input placeholder="再次输入新密码" border="surround" v-model="requirePassword" :border="none"></u-input>
			</view> -->
		</view>
		<view class="fixed box box-tb">
			<u-button shape="circle" :customStyle="customStyle" @click="comfirm()">确定</u-button>
			<view class="tips mt10 box box-align-center box-pack-center">
				<view class="">
					提示：小程序与五育通劳动教育云（www.wytldy.com）账号互通
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					newPassword: '',
					requirePassword: ''
				},
				customStyle: {
					backgroundColor: '#626BF1',
					color: '#fff'
				},
				rules: {
					newPassword: [{
							required: true,
							message: '新密码不能为空',
							trigger: ['blur', 'change']
						},
						{
							min: 4,
							max: 16,
							message: '长度在4-16个字符之间'
						}
					],
					requirePassword: [{
							required: true,
							message: '确认新密码不能为空',
							trigger: ['blur', 'change']
						},
						{
							min: 4,
							max: 16,
							message: '长度在4-16个字符之间'
						}
					]
				},
				user: uni.getStorageSync('user')
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			comfirm() {

				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						if (this.form.newPassword != '' && this.form.requirePassword != '') {
							if (this.form.newPassword != this.form.requirePassword) {
								uni.$u.toast('密码不一致，请重新输入')
								return
							} else {
								let params = {
									userid: this.user.id,
									pwd: this.form.newPassword
								};
								let opts = {
									url: '/sysuser/modifypwd',
									method: 'post'
								};
								this.$api.post(opts, params).then(res => {
									console.log(res);
									if (res.code == 0) {
										uni.$u.toast('修改成功')
										this.form = {
											newPassword: '',
											requirePassword: ''
										}
									}
								})
							}
						} else {
							uni.$u.toast('密码不能为空')
						}

					} else {
						console.log('验证失败');
					}
				});

			}
		}
	}
</script>

<style scoped lang="scss">
	.fixed {
		width: 90%;
		position: fixed;
		bottom: 100rpx;
	}

	.password {
		width: 710rpx;
		margin: 40rpx 20rpx;

		// .list {
		// 	padding: 0 40rpx;
		// 	width: 722rpx;
		// 	height: 112rpx;
		// 	background: #FFFFFF;
		// 	border-radius: 8rpx;
		// }
	}

	/deep/ .u-form-item {
		padding: 20rpx 40rpx !important;
		margin-top: 20rpx;
		width: 722rpx;
		height: 112rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
	}

	.tips {
		font-size: 24rpx;

		.a-color {
			color: #7F84E4;
		}
	}
</style>
